<template>
  <view class="progress-container">
    <view class="progress-bar">
      <view
        class="progress-fill"
        :style="{ width: progressPercent + '%' }"
      />
      <view class="progress-text">{{ currentStep }} / {{ totalSteps }}</view>
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps } from 'vue';

const props = defineProps({
  currentStep: {
    type: Number,
    default: 1,
  },
  totalSteps: {
    type: Number,
    default: 12,
  },
});

const progressPercent = computed(() => {
  if (props.totalSteps === 0) return 0;
  return (props.currentStep / props.totalSteps) * 100;
});
</script>

<style scoped>
.progress-container {
  padding: 0rpx;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 40rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #007aff, #66ccff);
  border-radius: 20rpx 0 0 20rpx;
  transition: width 0.3s;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
